<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: xdh-area-selector/xdh-area-selector.vue</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: xdh-area-selector/xdh-area-selector.vue</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;el-cascader v-if="cascaded&amp;&amp;areaData.length>0"
               v-model="selectValue"
               :options="areaData"
               v-bind="$props">
  &lt;/el-cascader>

  &lt;xdh-area-select v-else-if="areaData.length>0"
                   v-bind="$props"
                   :data="areaData"
                   :selectWidth="selectWidth"
                   @on-select="handleSelectData">&lt;/xdh-area-select>
&lt;/template>

&lt;script>
  /**
   * 中国行政区级联选择组件
   * @module widgets/xdh-anchor
   */
  import XdhAreaSelect from './xdh-area-select.vue'

  function loadAreaData() {
    return import('./data/pcaa')
  }

  const objToData = function (obj, parentId, level = 0, showLevel = 4) {
    let temp = [], result = []
    const data = obj[parentId]

    if (!obj &amp;&amp; !data) {
      return result
    }

    for (const key in data) {
      if (data.hasOwnProperty(key)) {
        const item = {
          value: key,
          label: data[key]
        }
        // 控制显示的级别
        if (level &lt; showLevel) {
          temp = objToData(obj, key, level + 1, showLevel)
          if (temp.length > 0) {
            item.children = temp
          }
        }
        result.push(item)
      }
    }

    return result
  }

  export default {
    name: 'XdhAreaSelector',
    components: {
      XdhAreaSelect
    },
    /**
     * 参数属性
     * @property {Boolean} isDefault 是否读取默认数据，不读取则customData必须要传入
     * @property {Array} customData 业务自定义数据，当isDefault为false的时候，需传入
     * @property {Array} value 用于存放结果的数组，接受选中的key组成的数组，如['110000', '110100', '110101', '110101004000']
     * @property {Boolean} cascaded 是否显示级联
     * @property {Number} level 要显示的级别，如设为2则显示省、市和县，即3级，级别可设为0、1、2、3四级
     * @property {String} size 组件的尺寸，包括 mini small medium三种，默认为medium
     * @property {Boolean} filterable 是否可搜索，添加该属性则点击选择器后可输入名称搜索
     * @property {Boolean} clearable 是否可以清空选项
     * @property {Boolean} disabled 设置禁用整个级联选择器或下拉框选择器
     * @property {String} selectWidth 下拉框形式的每个下拉框的宽度
     */
    props: {
      isDefault: {
        type: Boolean,
        default: false
      },
      customData: {
        type: Array,
        validator(val) {
          return !this.isDefault
        }
      },
      value: {
        type: Array
      },
      cascaded: {
        type: Boolean,
        default: false
      },
      level: {
        type: Number,
        validator(val) {
          return val >= 0
        },
        default: 3
      },
      size: {
        type: String,
        validator(val) {
          return ['mini', 'small', 'medium'].includes(val)
        },
        default: 'medium'
      },
      filterable: {
        type: Boolean,
        default: false
      },
      clearable: {
        type: Boolean,
        default: true
      },
      disabled: {
        type: Boolean,
        default: false
      },
      selectWidth: {
        type: String,
        default: '20%'
      }
    },
    data() {
      return {
        selectValue: this.value,
        chinaAreaData: null,
        areaData: []
      }
    },
    watch: {
      selectValue(val) {
        this.handleSelectData(val)
      }
    },
    methods: {
      handleSelectData(val) {
        let selectValue = [], currObj
        if (this.isDefault) {
          let i = 0
          while (i &lt; val.length) {
            if (i === 0) {
              currObj = this.chinaAreaData['86']
            } else {
              currObj = this.chinaAreaData[val[i - 1]]
            }
            if (currObj &amp;&amp; val[i]) {
              selectValue.push({
                code: val[i],
                name: currObj[val[i]]
              })
            } else {
              selectValue.push({})
            }
            ++i
          }
        } else {
          let i = 0, temp
          while (i &lt; val.length) {
            if (i === 0) {
              temp = this.areaData.filter(item => {
                return item.value === val[0]
              })
            } else {
              temp = temp[0].children.filter(item => {
                return item.value === val[i]
              })
            }

            if (temp) {
              selectValue.push({
                code: temp[0].value,
                name: temp[0].label
              })
            }

            ++i
          }
        }
        this.$emit('select', selectValue)
      }
    },
    created() {
      if (this.isDefault) {
        Promise.all([loadAreaData()]).then((results) => {
          this.chinaAreaData = results[0].chinaAreaData
          this.areaData = objToData(this.chinaAreaData, '86', 0, this.level)
        })
      } else {
        this.areaData = this.customData
      }
    }
  }
&lt;/script>
</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-widgets_xdh-affix.html">widgets/xdh-affix</a></li><li><a href="module-widgets_xdh-anchor.html">widgets/xdh-anchor</a></li><li><a href="module-widgets_xdh-avatar.html">widgets/xdh-avatar</a></li><li><a href="module-widgets_xdh-back-top.html">widgets/xdh-back-top</a></li><li><a href="module-widgets_xdh-calendar.html">widgets/xdh-calendar</a></li><li><a href="module-widgets_xdh-capture.html">widgets/xdh-capture</a></li><li><a href="module-widgets_xdh-contextmenu.html">widgets/xdh-contextmenu</a></li><li><a href="module-widgets_xdh-countdown.html">widgets/xdh-countdown</a></li><li><a href="module-widgets_xdh-curd.html">widgets/xdh-curd</a></li><li><a href="module-widgets_xdh-description-list.html">widgets/xdh-description-list</a></li><li><a href="module-widgets_xdh-dialog.html">widgets/xdh-dialog</a></li><li><a href="module-widgets_xdh-dialog-form.html">widgets/xdh-dialog-form</a></li><li><a href="module-widgets_xdh-echarts.html">widgets/xdh-echarts</a></li><li><a href="module-widgets_xdh-echarts_chart_xdh-bar-rankings.html">widgets/xdh-echarts/chart/xdh-bar-rankings</a></li><li><a href="module-widgets_xdh-echarts_chart_xdh-flow.html">widgets/xdh-echarts/chart/xdh-flow</a></li><li><a href="module-widgets_xdh-echarts_chart_xdh-pie-gauge.html">widgets/xdh-echarts/chart/xdh-pie-gauge</a></li><li><a href="module-widgets_xdh-echarts_chart_xdh-pie-semiring.html">widgets/xdh-echarts/chart/xdh-pie-semiring</a></li><li><a href="module-widgets_xdh-echarts_chart_xdh-waterwave.html">widgets/xdh-echarts/chart/xdh-waterwave</a></li><li><a href="module-widgets_xdh-editor.html">widgets/xdh-editor</a></li><li><a href="module-widgets_xdh-ellipsis.html">widgets/xdh-ellipsis</a></li><li><a href="module-widgets_xdh-filter-panel.html">widgets/xdh-filter-panel</a></li><li><a href="module-widgets_xdh-form.html">widgets/xdh-form</a></li><li><a href="module-widgets_xdh-go.html">widgets/xdh-go</a></li><li><a href="module-widgets_xdh-grid.html">widgets/xdh-grid</a></li><li><a href="module-widgets_xdh-header.html">widgets/xdh-header</a></li><li><a href="module-widgets_xdh-image-picker.html">widgets/xdh-image-picker</a></li><li><a href="module-widgets_xdh-image-text.html">widgets/xdh-image-text</a></li><li><a href="module-widgets_xdh-layout.html">widgets/xdh-layout</a></li><li><a href="module-widgets_xdh-list-panel.html">widgets/xdh-list-panel</a></li><li><a href="module-widgets_xdh-loading.html">widgets/xdh-loading</a></li><li><a href="module-widgets_xdh-marquee.html">widgets/xdh-marquee</a></li><li><a href="module-widgets_xdh-menu.html">widgets/xdh-menu</a></li><li><a href="module-widgets_xdh-menu-toggle.html">widgets/xdh-menu-toggle</a></li><li><a href="module-widgets_xdh-pager.html">widgets/xdh-pager</a></li><li><a href="module-widgets_xdh-panel.html">widgets/xdh-panel</a></li><li><a href="module-widgets_xdh-print.html">widgets/xdh-print</a></li><li><a href="module-widgets_xdh-scroll.html">widgets/xdh-scroll</a></li><li><a href="module-widgets_xdh-select.html">widgets/xdh-select</a></li><li><a href="module-widgets_xdh-slide-panel.html">widgets/xdh-slide-panel</a></li><li><a href="module-widgets_xdh-table.html">widgets/xdh-table</a></li><li><a href="module-widgets_xdh-tabs.html">widgets/xdh-tabs</a></li><li><a href="module-widgets_xdh-tabs_sortable.html">widgets/xdh-tabs/sortable</a></li><li><a href="module-widgets_xdh-tag-canvas.html">widgets/xdh-tag-canvas</a></li><li><a href="module-widgets_xdh-tag-select.html">widgets/xdh-tag-select</a></li><li><a href="module-widgets_xdh-timeline.html">widgets/xdh-timeline</a></li><li><a href="module-widgets_xdh-title.html">widgets/xdh-title</a></li><li><a href="module-widgets_xdh-tree.html">widgets/xdh-tree</a></li><li><a href="module-widgets_xdh-tree-select.html">widgets/xdh-tree-select</a></li><li><a href="module-widgets_xdh-tree-table.html">widgets/xdh-tree-table</a></li><li><a href="module-widgets_xdh-watermark.html">widgets/xdh-watermark</a></li><li><a href="module-widgets_xdh-window.html">widgets/xdh-window</a></li></ul><h3>Classes</h3><ul><li><a href="for%2520recursively%2520splitting%2520tag%2520contents%2520on%2520_br_%2520tags.html">for recursively splitting tag contents on <br> tags</a></li><li><a href="module-widgets_xdh-tabs_sortable-Sortable.html">Sortable</a></li><li><a href="Outline.html">Outline</a></li><li><a href="Tag.html">Tag</a></li><li><a href="TagCanvas.html">TagCanvas</a></li></ul><h3>Events</h3><ul><li><a href="module-widgets_xdh-menu-toggle.html#~event:change">change</a></li><li><a href="module-widgets_xdh-image-picker.html#~event:click">click</a></li><li><a href="module-widgets_xdh-menu-toggle.html#~event:close">close</a></li><li><a href="module-widgets_xdh-pager.html#~event:current-change">current-change</a></li><li><a href="module-widgets_xdh-tabs.html#~event:edit">edit</a></li><li><a href="module-widgets_xdh-tree-select.html#~event:input">input</a></li><li><a href="module-widgets_xdh-capture.html#~event:on-capture">on-capture</a></li><li><a href="module-widgets_xdh-grid.html#~event:on-change">on-change</a></li><li><a href="module-widgets_xdh-image-picker.html#~event:on-clear">on-clear</a></li><li><a href="module-widgets_xdh-tag-canvas.html#event:on-click">on-click</a></li><li><a href="module-widgets_xdh-window.html#~event:on-closed">on-closed</a></li><li><a href="module-widgets_xdh-window.html#~event:on-collapsed">on-collapsed</a></li><li><a href="module-widgets_xdh-table.html#~event:on-column-sort">on-column-sort</a></li><li><a href="module-widgets_xdh-curd.html#~event:on-dialog-close">on-dialog-close</a></li><li><a href="module-widgets_xdh-curd.html#~event:on-dialog-open">on-dialog-open</a></li><li><a href="module-widgets_xdh-window.html#~event:on-drag">on-drag</a></li><li><a href="module-widgets_xdh-countdown.html#~event:on-end">on-end</a></li><li><a href="module-widgets_xdh-contextmenu.html#~event:on-hide">on-hide</a></li><li><a href="module-widgets_xdh-window.html#~event:on-minimized">on-minimized</a></li><li><a href="module-widgets_xdh-contextmenu.html#~event:on-mouseenter">on-mouseenter</a></li><li><a href="module-widgets_xdh-contextmenu.html#~event:on-mouseleave">on-mouseleave</a></li><li><a href="module-widgets_xdh-header.html#~event:on-nav-select">on-nav-select</a></li><li><a href="module-widgets_xdh-capture.html#~event:on-output">on-output</a></li><li><a href="module-widgets_xdh-filter-panel.html#~event:on-query'">on-query'</a></li><li><a href="module-widgets_xdh-table.html#~event:on-reach-bottom">on-reach-bottom</a></li><li><a href="module-widgets_xdh-table.html#~event:on-reach-top">on-reach-top</a></li><li><a href="module-widgets_xdh-go.html#~event:on-ready">on-ready</a></li><li><a href="global.html#event:on-remove">on-remove</a></li><li><a href="module-widgets_xdh-form.html#~event:on-reset">on-reset</a></li><li><a href="module-widgets_xdh-window.html#~event:on-resize">on-resize</a></li><li><a href="module-widgets_xdh-table.html#~event:on-row-sort">on-row-sort</a></li><li><a href="module-widgets_xdh-list-panel.html#~event:on-scroll">on-scroll</a></li><li><a href="module-widgets_xdh-header.html#~event:on-search">on-search</a></li><li><a href="module-widgets_xdh-tree-select.html#~event:on-selected">on-selected</a></li><li><a href="module-widgets_xdh-contextmenu.html#~event:on-show">on-show</a></li><li><a href="module-widgets_xdh-slide-panel.html#~event:on-slide">on-slide</a></li><li><a href="module-widgets_xdh-window.html#~event:on-start-drag">on-start-drag</a></li><li><a href="module-widgets_xdh-window.html#~event:on-start-resize">on-start-resize</a></li><li><a href="module-widgets_xdh-window.html#~event:on-stop-drag">on-stop-drag</a></li><li><a href="module-widgets_xdh-window.html#~event:on-stop-resize">on-stop-resize</a></li><li><a href="module-widgets_xdh-form.html#~event:on-submit">on-submit</a></li><li><a href="module-widgets_xdh-curd.html#~event:on-success">on-success</a></li><li><a href="module-widgets_xdh-header.html#~event:on-tool-click">on-tool-click</a></li><li><a href="module-widgets_xdh-contextmenu.html#~event:on-trigger">on-trigger</a></li><li><a href="module-widgets_xdh-editor.html#~event:on-upload">on-upload</a></li><li><a href="module-widgets_xdh-menu-toggle.html#~event:open">open</a></li><li><a href="module-widgets_xdh-filter-panel.html#~event:reset-expand-fields">reset-expand-fields</a></li><li><a href="module-widgets_xdh-menu.html#~event:select">select</a></li><li><a href="module-widgets_xdh-pager.html#~event:size-change">size-change</a></li><li><a href="module-widgets_xdh-tabs.html#~event:tab-add">tab-add</a></li><li><a href="module-widgets_xdh-tabs.html#~event:tab-click">tab-click</a></li><li><a href="module-widgets_xdh-tabs.html#~event:tab-remove">tab-remove</a></li><li><a href="module-widgets_xdh-filter-panel.html#~event:toggle">toggle</a></li><li><a href="module-widgets_xdh-affix.html#event:change">change</a></li><li><a href="module-widgets_xdh-back-top.html#event:click">click</a></li><li><a href="module-widgets_xdh-curd.html#~event:update:query">update:query</a></li><li><a href="module-widgets_xdh-filter-panel.html#~event:update:model">update:model</a></li><li><a href="on-change%2520%2520%25E6%2593%258D%25E4%25BD%259C%25E5%258D%2595%25E4%25B8%25AA%25E6%25A0%2587%25E7%25AD%25BE%25E5%2590%258E%25E8%25A7%25A6%25E5%258F%2591%25E4%25BA%258B%25E4%25BB%25B6%2520%25E5%259B%259E%25E8%25B0%2583%25E5%258F%2582%25E6%2595%25B0%25E5%25B7%25A5%25E4%25B8%25A4%25E4%25B8%25AA.html#~event:%25E4%25BE%259D%25E6%25AC%25A1%25E4%25B8%25BA%25EF%25BC%259A%25E7%25AC%25AC%25E4%25B8%2580%25E5%25BD%2593%25E5%2589%258D%25E6%2593%258D%25E4%25BD%259C%25E7%259A%2584%25E6%25A0%2587%25E7%25AD%25BE%25E6%2595%25B0%25E6%258D%25AE%25E5%25AF%25B9%25E8%25B1%25A1%25EF%25BC%258C%25E7%25AC%25AC%25E4%25BA%258C%25E4%25B8%25BA%25E9%2580%2589%25E4%25B8%25AD%25E7%259A%2584%25E6%25A0%2587%25E7%25AD%25BE%25E5%25AF%25B9%25E8%25B1%25A1%25E6%2595%25B0%25E7%25BB%2584%25E9%259B%2586">依次为：第一当前操作的标签数据对象，第二为选中的标签对象数组集</a></li><li><a href="on-checked-all%2520%25E5%2585%25A8%25E9%2580%2589%25E6%258C%2589%25E9%2592%25AE%25E8%25A7%25A6%25E5%258F%2591%25E4%25BA%258B%25E4%25BB%25B6.html#~event:%25E4%25B8%2580%25E4%25B8%25AA%25E5%258F%2582%25E6%2595%25B0%25E8%25A1%25A8%25E7%25A4%25BA%25E5%25BD%2593%25E5%2589%258D%25E7%258A%25B6%25E6%2580%2581:on-%25E5%2585%25A8%25E9%2580%2589%25E4%25B8%25AD%25EF%25BC%258Coff-%25E5%2585%25A8%25E5%258F%2596%25E6%25B6%2588"> 一个参数表示当前状态:on-全选中，off-全取消</a></li></ul><h3>Global</h3><ul><li><a href="global.html#AddShadowToImage">AddShadowToImage</a></li><li><a href="global.html#counter">counter</a></li><li><a href="global.html#RoundImage">RoundImage</a></li><li><a href="global.html#scopeSlots">scopeSlots</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Tue Oct 09 2018 16:28:55 GMT+0800 (CST)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
